<template>
  <div>
    <!-- 卡片视图区域 -->
    <the-table :data="state.tabledata" :pageInfo="state.queryInfo" :total="state.total" @pageInfoChange="pageInfoChange" @handleAdd="addAuth" :layout="['addBtn', 'search', 'column']" :columns="state.columns" @changeColumn="changeColumn" @clearInput="clearInput" @search="search">
      <!-- 表格区 -->
      <el-table-column label="标签" prop="label" v-if="state.columns[0].show">
      </el-table-column>
      <el-table-column label="角色名称" prop="roleName" v-if="state.columns[1].show">
      </el-table-column>
      <el-table-column label="状态" prop="state" v-if="state.columns[2].show">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.state == 1">正常</el-tag>
          <el-tag type="danger" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <!-- 操作区域 -->
      <el-table-column label="操作" width="200px" v-if="state.columns[3].show">
        <template #default="scope">
          <el-button size="small" type="text" style="color: #409eff" @click="showEditType(scope.row)">
            <el-icon class="el-input__icon">
              <edit />
            </el-icon> 编辑
          </el-button>
          <el-button size="small" type="text" style="color: #f56c6c" @click="removeById(scope.row.id)">
            <el-icon class="el-input__icon">
              <delete />
            </el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </the-table>

    <!-- 新增 -->
    <el-dialog title="新增" v-model="state.addVisible" width="50%" @close="state.addVisible=false">
      <!-- 内容主体区域 -->
      <el-form :model="state.form" :rules="state.formRules" ref="formRef" label-width="80px" class="demo-ruleForm">
        <el-form-item label="角色id" prop="label" v-if="!state.isAdd">
          <el-input v-model="state.form.identity" :disabled="!state.isAdd"></el-input>
        </el-form-item>
        <el-form-item label="角色标签" prop="label">
          <el-input v-model="state.form.label"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="state.form.roleName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="state.form.state">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="停用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限" prop="permissionList">
          <el-collapse style="width: 100%">
            <el-collapse-item v-for="(item, index) in state.permissionData" :key="index" :title="item.name">
              <!-- <el-checkbox :label="item.id" name="permissionList" :checked="form.permissionList2.indexOf(item.id) > -1">{{item.name}}</el-checkbox> -->
              <div v-if="state.flag">
                <el-checkbox-group v-model="state.form.checked">
                  <el-checkbox v-for="(item2, index2) in item.children" :key="index2" :label="item2.id" name="permissionList2" @change="val => handleCheckAllChange(val, item2)">{{item2.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="state.addVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default { name: "AuthorityAssignment" };
</script>

<script lang="ts" setup>
import {
  pageList,
  permissions,
  add,
  update,
  remove,
} from "@/api/Authority/role";
import { addLogs } from "#/Home/Home";
import { reactive } from "vue-demi";
import { ElMessage } from "element-plus";
import TheTable from "@/components/common/TheTable.vue";
const state = reactive({
  flag: true,
  queryInfo: {
    query: "",
    pageNum: 1,
    pageSize: 5,
    isShow: true,
  },
  // 统计公告的总数量
  total: 0,
  addVisible: false,
  addClosed: false,
  isAdd: true,
  tabledata: [],
  permissionData: [],
  form: {
    identity: "",
    label: "",
    roleName: "",
    state: "",
    permissionList: [],
    permissionList2: [],
  },
  //
  formRules: {
    content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
  },
  columns: [
    { name: "身份", show: true },
    { name: "角色名称", show: true },
    { name: "状态", show: true },
    { name: "操作", show: true },
  ],
});
const initList = async () => {
  await pageList(state.queryInfo.pageNum, state.queryInfo.pageSize).then(
    (res) => {
      state.tabledata = res.data.roles.roles.content;
      state.total = res.data.roles.roles.totalElements;
      console.log(state);
    }
  );
};
const initPermission = async () => {
  await permissions().then((res) => {
    state.permissionData = res.data.permissions;
    // console.log(this.permissionData);
  });
};
// 清除输入框的内容
const clearInput = () => {
  state.queryInfo.pageNum = 1;
  state.queryInfo.pageSize = 5;
  initList();
};
// 搜索
const search = () => {};
const addAuth = () => {
  state.isAdd = true;
  state.form = {
    identity: "",
    label: "",
    roleName: "",
    state: "",
    permissionList: [],
    checked: [],
  };
  state.addVisible = true;
};
const showEditType = (obj) => {
  state.isAdd = false;
  Object.assign(state.form, obj);
  state.form.checked = [];
  for (let i = 0; i < obj.permissionList.length; i++) {
    state.form.checked.push(obj.permissionList[i].id);
  }
  state.addVisible = true;
};
const confirm = async () => {
  if (state.isAdd) {
    state.form.identity = parseInt(state.form.identity);
    await add(state.form).then((res) => {
      // console.log(res);
      if (res.data.ret == 0) {
        ElMessage.success("添加成功");
        state.addVisible = false;
        addLogs({
          userId: window.sessionStorage.getItem("userId"),
          behavior: "新增了《" + state.form.roleName + "》角色",
        });
      }
      initList();
    });
  } else {
    state.form.permissionList = state.form.checked;
    // console.log(this.form)
    await update(state.form.identity, state.form).then((res) => {
      if (res.data.ret == 0) {
        ElMessage.success("修改成功");
        initList();
        state.addVisible = false;

        addLogs({
          userId: window.sessionStorage.getItem("userId"),
          behavior: "修改了《" + state.form.roleName + "》角色",
        });
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  }
};
const handleCheckAllChange = (val, item) => {
  state.flag = false;
  state.flag = true;
};
const removeById = async (id) => {
  await remove(id).then((res) => {
    // console.log(res);
    if (res.data.ret == 0) {
      ElMessage.success("删除成功");
    }
    initList();
  });
};
const pageInfoChange = (type: string, newValue: number) => {
  if (type === "size") state.queryInfo.pageSize = newValue;
  else if (type === "page") state.queryInfo.pageNum = newValue;
  initList();
};
const changeColumn = (columns) => {
  state.columns = columns;
};
initList();
initPermission();
</script>

<style lang="less" scoped>
</style>


